<html>
    <head>
        // 定义样式表
        <style>
            #test1,.class1 {
                color: rebeccapurple;font-size: 24px;
            }

            /* 基础语法也可以 #id, .clas  */
            ul>#list_test {
                color: red;
            }

            /* 选择所有紧跟在 #coffee 元素之后的第一个 <li> 元素 */
            ul>li:first-child {
                font-weight: 600;
                font-size: 34px;
            }
            
            iframe {
                width: 80vw;
                height: 80vh;
            }

            #overflowTest {
                background: #4CAF50;
                color: white;
                padding: 15px;
                width: 80%;
                height: 100px;
                overflow:auto;
                border: 1px solid rgb(150, 18, 18);
            }
        </style>
    </head>
    <body>
        <h1 id="0">H1</h1>
        <h1 id="1">H1.1</h1>
        <a href="https://www.baidu.com" target="_blank">百度</a>
        <h1 id="base">基础标签</h1>
        <!--定义一个注释 *xxx, *bbb-->
        <!--块级别元素(该元素自己独立站一行), 行内元素(多个元素 放置于一行内)-->
        <!--块级别元素(该元素自己独立站一行), 行内元素(多个元素 放置于一行内)-->
        <div>
            <!--全是块级别-->
            <ul>h1 to h6  定义 HTML 标题</ul>
            <ul>p	          定义一个段落</ul>
            <ul>br	      定义换行</ul>
            <ul>hr	      定义水平线</ul>
        </div> 
        <!--演示-->
        <div>
            <p>sdfsdfsd sdfsdfsd
                <br>
                sdfsf
                <hr>
                <br>
                sdfsdf
            </p>
            
        </div>
        <h1>容器标签</h1>
        <a>大纲</a>
        <div>
            <ul>div: 块级别容器</ul>
            <ul>span: 行级别容器</ul>
        </div>
        <span>
            <a id="test1">实践代码</a>
            <a class="class1">实践代码</a>
            <a >实践代码</a>
        </span>
        <h1>CSS 演示</h1>
        <ul id="list_menu" class="ul_class">
            <li >Coffee</li>
            <li id="coffee">Tea</li>
            <li>Milk</li>
            <div>
            <li>In Div</li>
            </div>
        </ul>   
        
        <h1>相对长度</h1>
        <!-- <div>
            <iframe src="https://www.runoob.com/cssref/css-selectors.html" frameborder="2"></iframe>
        </div> -->

        <h1>盒子模型</h1>
        <div>
            <div style="height: 200px;width: 200px; background-color: aqua;">
                <span>测试盒子</span>
            </div>
        </div>

        <div>
            <div id="overflowTest">
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
                <p>这里的文本内容是可以滚动的，滚动条方向是垂直方向。</p>
            </div>
        </div>


        <script>
            var base = document.getElementById('base')
            base.style = "color:red;"
        </script>
    </body>
</html>